import React, { Component } from 'react'

class ChildSon extends Component {
  // 子组件会优先于父组件销毁掉
  componentWillUnmount() {
    console.log('ChildSon -- componentWillUnmount')
  }

  render() {
    return (
      <div>
        <h3>child组的 -- 子组件</h3>
      </div>
    )
  }
}

class Child extends Component {
  timer = null

  // 销毁前处理的
  componentWillUnmount() {
    console.log('Child -- componentWillUnmount')
    this.timer && clearInterval(this.timer)
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      console.log('hello')
    }, 1000)
  }

  render() {
    return (
      <div>
        <h3>child子组件</h3>
        <ChildSon />
      </div>
    )
  }
}

class App extends Component {
  state = {
    show: true
  }

  render() {
    return (
      <div>
        App:
        <button
          onClick={() => {
            this.setState({
              show: false
            })
          }}
        >
          隐藏child组件
        </button>
        <hr />
        {this.state.show ? <Child /> : null}
      </div>
    )
  }
}

export default App
